<template>
  <div>
    <Header></Header>

    
   <div class="container">
      <!-- 头部标题 -->
      <div class="header">
        <h1 class="title"><i class="el-icon-position"></i>地产分类</h1>
      </div>
      <div class="content" >
        <ul>
          <li v-for="item in categoryList" :key="item.id" @click="toproperties(item.id)">
            <div class="agentsImg">
              <img :src="item.image" alt="" />
            </div>
            <div class="content">
              <h2>{{item.title}}</h2>
              <p>{{item.desc}}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from '@/components/Footer.vue'
import Header from '@/components/Header.vue'
import {getcategory} from '@/api/category'
export default {
  components: { Header, Footer },
  data () {
    return {
      categoryList : []
    }
  },
 async created () {
   const res =  await getcategory()
   this.categoryList = res.data
  },
  methods:{
    toproperties(id){
      this.$router.push({path:'/properties',query:{id}})
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  padding: 0 30px 30px 30px;
  width: 1000px;
  margin: 0 auto;
  // background-color: pink;
  // margin-top: 20px;
  .header {
    .title {
      font-size: 18px;
      color: orange;
      i {
        font-size: 20px;
        // color: orange;
        margin-right: 5px;
      }
    }
  }
  .content {
    padding: 10px;
    li {
      list-style: none;
      width: 100%;
      margin-right: 50px;
      height: 200px;
      // background-color: yellow;
      display: flex;
      margin-bottom: 20px;
      border: 1px solid #ccc;
      border-radius: 30px;

      .agentsImg {
        width: 300px;
        // background-color: purple;
        text-align: center;
        border-right: 1px solid #ccc;
        img {
          width: 200px;
          height: 200px;
          object-fit: cover;
          border-radius: 50%;
        
        }
      }
      .content {
        text-align: center;
        flex: 1;
        // background-color: green;
      }
    }
  }
}
</style>